import StandardFormRow from '@/pages/bisheProject/components/StandardFormRow';
import TagSelect from '@/pages/bisheProject/components/TagSelect';
import { useRequest } from '@umijs/max';
import { Button, Card, Col, Form, Input, Row } from 'antd';
import { DefaultOptionType } from 'antd/es/select';
import { useState } from 'react';
import { listBisheProjectVoByPageUsingPost } from '@/services/backend/bisheProjectController';

interface Props {
  onChange: (values: any) => void;
}

interface SearchParams {
  title?: string;
  tagList?: string[];
}

const FormItem = Form.Item;
const Search: React.FC<Props> = (props) => {
  const { onChange } = props;
  const [searchParams, setSearchParams] = useState<SearchParams>({});
  const [form] = Form.useForm(); // 添加Form实例

  //==================获取标签信息==========================
  const { data } = useRequest(() => {
    return listBisheProjectVoByPageUsingPost({});
  });

  const tags = data?.records?.flatMap((item) => item.tagList);

  const categoryOptions: DefaultOptionType[] =
    tags?.map((item) => ({
      value: item,
      label: item,
    })) ?? [];
  //=====================================================

  const handleSearch = () => {
    // 确保搜索参数包含最新的title值
    onChange(searchParams);
  };

  // 处理输入框变化
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newTitle = e.target.value;
    setSearchParams((prev) => ({
      ...prev,
      title: newTitle,
    }));
  };

  return (
    <>
      <Card variant={'borderless'} style={{ marginTop: '24px' }}>
        <Form
          form={form}
          layout="inline"
          onValuesChange={(_, values) => {
            // 更新搜索参数，保留title字段
            const newParams = {
              ...searchParams,
              tagList: values.category,
            };
            // 更新本地状态
            setSearchParams(newParams);
            // 直接触发搜索
            onChange(newParams);
          }}
        >
          <StandardFormRow
            title="所属类目"
            block
            style={{
              paddingBottom: 11,
            }}
          >
            <FormItem name="category">
              <TagSelect expandable>
                {categoryOptions.map((category) => (
                  <TagSelect.Option value={category.value!} key={category.value}>
                    {category.label}
                  </TagSelect.Option>
                ))}
              </TagSelect>
            </FormItem>
          </StandardFormRow>
          <StandardFormRow title="其它选项" grid last>
            <Row gutter={8}>
              <Col>
                <Input
                  placeholder="请搜索你感兴趣的项目"
                  style={{
                    maxWidth: '200px',
                    width: '200px',
                  }}
                  value={searchParams.title}
                  onChange={handleInputChange}
                />
              </Col>
              <Col>
                <Button type="primary" onClick={handleSearch}>搜索</Button>
              </Col>
            </Row>
          </StandardFormRow>
        </Form>
      </Card>
    </>
  );
};

export default Search;
